<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>{{ dpShop.shopName }}数据分析</span>
                <el-button
                    style="float: right; padding: 3px 0"
                    type="text"
                    @click="close"
                >关闭
                </el-button>
            </div>
            <div>
                <el-form ref="searchForm" :inline="true" label-suffix="" label-width="100px"
                         label-position="left" size="small">
                    <el-row>
                        <el-col>
                            <el-form-item label="请选择日期">
                                <el-date-picker
                                    v-model="dateRange"
                                    value-format="yyyy-MM-dd"
                                    unlink-panels
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :picker-options="this.CONST.analysis_date_options">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" v-on:click="getData">确定</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <el-descriptions title="" direction="vertical" :column="8" border size="small">
                <el-descriptions-item label="门店名称">
                    <el-link>{{ dpShop.shopName }}</el-link>
                </el-descriptions-item>
                <el-descriptions-item label="门店ID">
                    {{ dpShop.shopId }}
                </el-descriptions-item>
                <el-descriptions-item label="人均">
                    {{ dpShop.avgPrice }}
                </el-descriptions-item>
                <el-descriptions-item label="大分">
                    {{ dpShop.mainScore }}
                </el-descriptions-item>
                <el-descriptions-item label="口味分">
                    {{ dpShop.tasteScore }}
                </el-descriptions-item>
                <el-descriptions-item label="环境分">
                    {{ dpShop.envScore }}
                </el-descriptions-item>
                <el-descriptions-item label="服务分">
                    {{ dpShop.serviceScore }}
                </el-descriptions-item>
                <el-descriptions-item label="食材分">
                    {{ dpShop.foodScore }}
                </el-descriptions-item>
            </el-descriptions>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>基础数据分析</span>
                </div>
                <dp-shop-history :shop-id="shopId"
                                 :shop-name="dpShop.shopName"
                                 :start-date="startDate"
                                 :end-date="endDate">
                </dp-shop-history>
            </el-card>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>自然曝光访问分析</span>
                </div>
                <dp-daily-analysis :shop-id="shopId"
                                   :shop-name="dpShop.shopName"
                                   :start-date="startDate"
                                   :end-date="endDate">
                </dp-daily-analysis>
            </el-card>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>评价分析</span>
                </div>
                <dp-feedback-analysis :shop-id="shopId"
                                      :shop-name="dpShop.shopName"
                                      :start-date="startDate"
                                      :end-date="endDate">
                </dp-feedback-analysis>
            </el-card>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>推广分析</span>
                </div>
                <dp-cyc-analysis :shop-id="shopId"
                                 :shop-name="dpShop.shopName"
                                 :start-date="startDate"
                                 :end-date="endDate">
                </dp-cyc-analysis>
            </el-card>
        </el-card>
    </div>
</template>

<script>
import {getDpShopByShopId} from "@/api/api";
import DpCycAnalysis from "@/component/analysis/DpCpcAnalysis";
import DpFeedbackAnalysis from "@/component/analysis/DpFeedbackAnalysis";
import DpDailyAnalysis from "@/component/analysis/DpDailyAnalysis";
import DpShopHistory from "@/component/DpShopHistory";

export default {
    name: "DpShopAnalysis",
    components: {DpCycAnalysis, DpFeedbackAnalysis, DpDailyAnalysis, DpShopHistory},
    data() {
        return {
            dpShop: {},
            shopId: '',
            startDate: '',
            endDate: '',
            // 时间范围
            dateRange: [],
        }
    },
    methods: {
        // 获取企业数据
        getData: function () {
            this.startDate = this.dateRange[0];
            this.endDate = this.dateRange[1];
            getDpShopByShopId({"shopId": this.shopId}).then(data => {
                this.dpShop = data.body;
                document.title = this.dpShop.shopName + '数据分析';
            })
        },
        close() {
            window.open('', '_self');
            window.close();
        },
    },
    created() {
        this.shopId = this.$route.query.shopId;
        this.startDate = this.$route.query.startDate;
        this.endDate = this.$route.query.endDate;
        this.dateRange = [this.startDate, this.endDate]
        this.getData();
    },
}
</script>

<style scoped>

</style>
